<template>
  <div id="dutyRoom">
    <!-- 值班功能 2018/3/7 11:44 zhangQ -->
    <Form ref="tabParamForm" :model="tabParam" label-position="right" inline>
      <!--<FormItem>-->
      <!--<Button type="primary" @click="exportData">-->
      <!--<Icon type="ios-download-outline"></Icon>-->
      <!--导出原始数据-->
      <!--</Button>-->
      <!--</FormItem>-->
      <FormItem label="时间：">
        <DatePicker v-model="datePicker.timeVal" type="daterange" :options="datePicker.options" split-panels
                    placeholder="时间" format="yyyy年MM月dd日" style="width: 230px"></DatePicker>
      </FormItem>

      <FormItem label="箱号：">
        <Input type="text" v-model="tabParam.containerNo" placeholder="集装箱号"></Input>
      </FormItem>

      <FormItem label="主运单号：">
        <Input type="text" v-model="tabParam.mainOrderNo" placeholder="主运单号"></Input>
      </FormItem>

      <FormItem>
        <Button type="primary" @click="refreshData" icon="ios-search">
          搜索
        </Button>
      </FormItem>

      <FormItem>
        <Button type="primary" @click="checkCoalType">
          选择提煤单票据类型
        </Button>
      </FormItem>
    </Form>

    <tablePage ref="allSubOrderTab" id="allSubOrderTab" :api="findBySubOrderToUserByPage" :param="tabParam"
               sortName="end_station_time desc,sort" sort-type="asc" :showSizer="true" :pageSizeOpts="pageSizeOpts">
      <template slot-scope="props">
        <Table :row-class-name="tabRowClassName" :columns="subOrderColumn" border :data="props.data"
               :height="allSubOrderTabHeight" ref="selection" @on-selection-change="subOrderCheck"></Table>
      </template>
    </tablePage>

    <XlinkModal v-model="operaModal.dutyOperaModalShow"
                :title="'填写提煤单号'+ currentRow.containerNoHead+currentRow.containerNoBody"
                className="vertical-center-modal" width="600px;">
      <dutyOperaModal v-if="operaModal.dutyOperaModalShow" :orderData="currentRow" @close="dutyOperaComplete"
                      @print="printCoal"></dutyOperaModal>
    </XlinkModal>

    <XlinkModal v-model="operaModal.coalTypeOperaModalShow" :title="'填写提煤单票据类型'" className="vertical-center-modal"
                width="600px;">
      <coalTypeOperaModal v-if="operaModal.coalTypeOperaModalShow" :orderData="checkOrderNo"
                          @close="coalTypeOperaComplete"></coalTypeOperaModal>
    </XlinkModal>

    <div style="display: none">
      <!--送货地址、箱号、车队名称-->
      <div ref="tlpj">
        <div style="font-weight: bold;padding: 10px;font-size: 22px;">
         <span>{{ currentRow.shippingAddress }}
          {{ currentRow.containerNoHead+currentRow.containerNoBody }}
          {{ currentRow.fleetName }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import tablePage from '@components/table/tablePage.vue'
  import { findBySubOrderToUserByPage } from '@api/backEnd/station'
  import hw from '@components/common/heightAndWidth'
  import moment from 'moment'
  import XlinkModal from '@/components/modal/xlinkModal'
  import dutyOperaModal from './components/dutyOperaModal'
  import coalTypeOperaModal from './components/coalTypeOperaModal'
  import printUtils from '@/components/print/index'
  // import { exportUtil } from '@/vendor/exportInvoke'

  export default {
    name: 'index',
    data () {
      let tabParam = {
        containerNo: '',
        startTime: moment().subtract(2, 'days').format('YYYY-MM-DD') + ' 00:00:00',
        endTime: moment().format('YYYY-MM-DD') + ' 23:59:59'
      }
      let datePicker = {
        timeVal: [tabParam.startTime, tabParam.endTime],
        options: {
          shortcuts: [
            {
              text: '最近一周 ',
              value () {
                let end = new Date()
                let start = new Date()
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
                return [start, end]
              }
            },
            {
              text: '最近一月',
              value () {
                let end = new Date()
                let start = new Date()
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
                return [start, end]
              }
            },
            {
              text: '最近三月',
              value () {
                let end = new Date()
                let start = new Date()
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
                return [start, end]
              }
            }
          ]
        }
      }
      let allSubOrderTabHeight = 500
      let checkOrderNo = []
      let pageSizeOpts = [108, 200, 400]
      let subOrderColumn = [
        {
          type: 'selection',
          width: 60,
          align: 'center'
        },
        {
          title: '联运主运单号',
          ellipsis: 'false',
          key: 'mainOrderNo',
          width: 200
        },
        {
          title: '托运人',
          ellipsis: 'false',
          key: 'shipper1',
          width: 185
        },
        {
          title: '收货人',
          ellipsis: 'false',
          key: 'receiver1',
          width: 185
        },
        {
          title: '车队',
          ellipsis: 'false',
          key: 'fleetName',
          minWidth: 150,
          width: 150,
          render: (h, params) => {
            let thisdata = params.row.fleetName
            return h('Poptip', {
              props: {
                content: thisdata,
                placement: 'top',
                trigger: 'hover'
              }
            }, thisdata)
          }
        },
        {
          title: '到达时间',
          ellipsis: 'false',
          key: 'endStationTime',
          width: 150,
          render: (h, params) => {
            let thisdata = params.row.endStationTime
            thisdata = thisdata ? moment(thisdata).format('YYYY-MM-DD HH:mm') : ''
            return (<span>{thisdata}</span>)
          }
        },
        {
          title: '发站',
          ellipsis: 'false',
          key: 'startStationName',
          width: 185
        },
        {
          title: '到站',
          ellipsis: 'false',
          key: 'endStationName',
          width: 185
        },
        {
          title: '货票号',
          key: 'waybillNo',
          sortable: true,
          width: 100
        },
        {
          title: '车号',
          key: 'trainNumber',
          sortable: true,
          width: 100
        },
        {
          title: '箱号字母',
          key: 'containerNoHead',
          width: 85
        },
        {
          title: '箱号',
          key: 'containerNoBody',
          width: 100
        },
        {
          title: '车牌号',
          ellipsis: 'false',
          key: 'truckPlate',
          width: 100,
          render: (h, params) => {
            let thisdata = params.row.truckPlate
            return h('Poptip', {
              props: {
                content: thisdata,
                placement: 'top',
                trigger: 'hover'
              }
            }, thisdata)
          }
        },
        {
          title: '司机',
          ellipsis: 'false',
          key: 'driverName',
          width: 150,
          render: (h, params) => {
            let thisdata = params.row.driverName
            return h('Poptip', {
              props: {
                content: thisdata,
                placement: 'top',
                trigger: 'hover'
              }
            }, thisdata)
          }
        },
        {
          title: '提煤单票据类型',
          ellipsis: 'false',
          key: 'coalBillType',
          width: 150
        },
        {
          title: '送货地址',
          key: 'shippingAddress',
          width: 200
        },
        {
          title: '提煤单号',
          ellipsis: 'false',
          key: 'coalNo',
          width: 150
        },
        {
          title: '值班人',
          ellipsis: 'false',
          key: 'dutyUser',
          width: 150
        },
        {
          title: '值班时间',
          ellipsis: 'false',
          key: 'dutyUpdateTime',
          width: 150,
          render: (h, params) => {
            let thisdata = params.row.dutyUpdateTime
            thisdata = thisdata ? moment(thisdata).format('YYYY-MM-DD HH:mm') : ''
            return (<span>{thisdata}</span>)
          }
        },
        {
          title: '联运子运单号',
          ellipsis: 'false',
          key: 'orderNo',
          width: 185
        },
        {
          title: '操作',
          width: 300,
          fixed: 'right',
          render: (h, params) => {
            // let thisdata = params.row.truckPlate
            let btnArray = []
            let beforeFun = (call) => {
              this.currentRow = params.row
              // call()
            }
            if (params.row.coalNo) {
              btnArray.push(<i-button type="warning" size="small" style="margin-right: 5px;" onClick={() => beforeFun(this.dutyOpera(params.row))}>重新操作</i-button>)
              btnArray.push(<i-button size="small" style="margin-right: 5px;" onClick={() => beforeFun(this.printCoal())}>重新打印</i-button>)
            } else {
              params.row.coalNo = ''
              // params.row.shippingAddress = ''
              btnArray.push(<i-button type="primary" size="small" style="margin-right: 5px;" onClick={() => beforeFun(this.dutyOpera(params.row))}>值班操作</i-button>)
            }
            return (btnArray)
          }
        }
      ]
      let currentColor = { currentClass: 0 }
      let operaModal = { dutyOperaModalShow: false, coalTypeOperaModalShow: false }
      let currentRow = {}
      let datas = {
        tabParam,
        findBySubOrderToUserByPage,
        datePicker,
        subOrderColumn,
        pageSizeOpts,
        allSubOrderTabHeight,
        operaModal,
        currentRow,
        checkOrderNo,
        currentColor
      }
      return datas
    },
    computed: {},
    methods: {
      refreshData () {
        this.currentColor = { currentClass: 0 }
        this.$refs['allSubOrderTab'].dataRefresh()
      },
      checkCoalType () {
        if (this.checkOrderNo.length <= 0) {
          this.$Message.error('请勾选单号')
          return false
        } else {
          this.operaModal.coalTypeOperaModalShow = true
        }
      },
      coalTypeOperaComplete () {
        this.operaModal.coalTypeOperaModalShow = false
      },
      subOrderCheck (selection) {
        console.log('row======', selection)
        this.checkOrderNo = []
        selection.forEach((item) => {
          this.checkOrderNo.push(item.orderNo)
        })
        // this.selectionSubOrder = selection
      },
      /**
       * TODO(值班操作)
       * @auther zhangQ
       * @date 2018/4/12 16:59
       */
      dutyOpera (row) {
        this.operaModal.dutyOperaModalShow = true
      },
      /**
       * TODO(提煤操作完成)
       * @auther zhangQ
       * @date 2018/4/12 18:14
       */
      dutyOperaComplete (obj) {
        this.currentRow.coalNo = obj.coalNo
        this.currentRow.shippingAddress = obj.address
        this.currentRow.coalBillType = obj.coalBillType
        this.currentRow.dutyUser = obj.dutyUser
        this.currentRow.fleetId = obj.fleetId
        this.currentRow.driverName = obj.driverName
        this.currentRow.truckPlate = obj.truckPlate
        this.operaModal.dutyOperaModalShow = false
        this.printCoal()
      },
      printCoal () {
        setTimeout(() => {
          printUtils.print({
            titile: '打印',
            template: this.$refs['tlpj'].innerHTML,
            width: '165mm',
            height: '92mm'
          })
        }, 200)
      },
      /**
       * 设置表格的行class
       * @auther zhangQ
       * @date 2018/4/20 10:21
       */
      tabRowClassName (row, index) {
        if (!this.currentColor[row.mainOrderNo]) {
          this.currentColor[row.mainOrderNo] = this.currentColor.currentClass++
          return 'rowClass' + this.currentColor[row.mainOrderNo]
        }
        return 'rowClass' + this.currentColor[row.mainOrderNo]
      }
    },
    watch: {
      'datePicker.timeVal' (val, oldVal) {
        if (val && val[0] && val[1]) {
          this.tabParam.startTime = moment(val[0]).format('YYYY-MM-DD') + ' 00:00:00'
          this.tabParam.endTime = moment(val[1]).format('YYYY-MM-DD') + ' 23:59:59'
        } else {
          delete this.tabParam.startTime
          delete this.tabParam.endTime
        }
      }
    },
    created () {
    },
    mounted () {
      setTimeout(() => {
        hw.setFullHeightAllWith('allSubOrderTab', 90, (height) => {
          this.allSubOrderTabHeight = height
        })
      }, 200)
    },
    components: {
      XlinkModal,
      dutyOperaModal,
      coalTypeOperaModal,
      tablePage
    }
  }
</script>

<style>
  #dutyRoom .rowClass0 td {
    background-color: #f5a56b;
  }

  #dutyRoom .rowClass1 td {
    background-color: #2db7f5;
  }

  #dutyRoom .rowClass2 td {
    background-color: #f4b7f5;
  }

  #dutyRoom .rowClass3 td {
    background-color: #d1f599;
  }

  #dutyRoom .rowClass4 td {
    background-color: #f5efc0;
  }

  #dutyRoom .rowClass5 td {
    background-color: #c2f5f5;
  }

  #dutyRoom .rowClass6 td {
    background-color: #9db3f5;
  }

  #dutyRoom .rowClass7 td {
    background-color: #26f5a2;
  }
</style>
